<template>
    <div id="mean-daily-close-echart" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script setup>
import { onMounted, reactive, watch } from "vue";
import * as echarts from 'echarts'
import { weekStockSearch } from '@/stores/week'
import { storeToRefs } from 'pinia';
import { builtData } from "../myechart/candlestickEchart";
import { getDailyDetailData } from "../service/daily";
import { useRouteQuery } from "../utils/useRoute";
import { openNewTableDDisplay } from "../router";

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

const state = reactive({
    opShow: true,
    count: 1000,
    pctMark: ''
})

// 网址传参
let stock = useRouteQuery('stock')
if (stock) {
    input.value = stock
}

let year = useRouteQuery('year',"")
state.pctMark = useRouteQuery('pctMark',"")
state.count = useRouteQuery('count',1000)
let opShow = useRouteQuery('opShow',1)
if (opShow == 0) {
    state.opShow = false
}

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    loadEchart()
})

let myChart = null
const initEchart = () => {
    myChart = echarts.init(document.getElementById('mean-daily-close-echart'))
    myChart.resize();

    // 添加点击事件
    myChart.on('dblclick', function(params) {
        openNewTableDDisplay(input.value, params.name)
    });
}

const loadEchart = () => {
    getDailyDetailData(input.value).then(res => {
        let data = res.data
        if (year) {
            data = data.filter(item => item.date <= year + '-12-31')
        }

        let option = builtData(input.value, data.slice(-1 * state.count), state.pctMark, state.opShow)
        myChart.setOption(option)
    })
}

onMounted(()=> {
    initEchart()
    loadEchart()
})
</script>